<template>
	<div class="view">
		<view class="nav-bar" :style="{paddingTop:StatusBar + 'px'}">
			<view class="nav-bar-item" :style="[{width:StatusWidth ? StatusWidth + 'px' : '100%'}]">
				<uni-icons @click="goBack" type="arrowleft" color="white" size="25"></uni-icons>
				<uni-icons @click="favorite(info.followStatus == 0 ? 0 : 1)"
					:type="info.followStatus == 0 ? 'star':'star-filled'"
					:color="info.followStatus == 0 ? 'white':'red'" size="25"></uni-icons>
			</view>
		</view>
		<div class="Info Box" :style="{paddingTop: StatusBar + 70 + 'px'}">
			<div>
				<span>{{ info.hospitalName }}</span>
				<span>{{ info.hospitalGrade }}</span>
				<span>{{ info.hospitalType }}</span>
			</div>
			<div>
				<p>
					<span>{{ info.departmentsNumber }}个</span>
					<span>科室</span>
				</p>
				<p>
					<span>{{ info.doctorsNumber }}个</span>
					<span>医生</span>
				</p>
			</div>
			<div>
				<p v-for="(item, index) in info.labelList" :key="index">{{ item }}</p>
			</div>
			<div>
				<img @click="add(1)" v-if="info.followStatus == 0" src="/static/images/ic_rating_bar.png" alt="" />
				<img @click="add(2)" v-else src="/static/images/ic_rating_bar_active.png" alt="" />
			</div>
		</div>
		<div class="Box">
			<view class="box-item">
				<text>{{info.hospitalAddress}}</text>
				<uni-icons type="arrowright"></uni-icons>
			</view>
			<view class="box-item">
				<text class="titl-view">简介</text>
				<view class="title" @click="gohospitalSynopsis(info.id)">
					<text>{{info.hospitalSynopsis}}</text>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
		</div>

		<div class="selectBox Box">
			<p class="title">按科室找专家</p>
			<div class="wrap" v-for="(val, k) in info.departmentsList" :key="k">
				<p class="title" @click="to(
		  `/pages/IndexPages/showDoctor/main?hospitalId=${id}&id=${val.departmentId}&name=${val.departmentName}`)">
					{{ val.departmentName
          }}<span>({{ val.departmentDoctorsNumber }}位)</span>
				</p>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getHospitalDetails,
		addFocus,
		cancelFocus
	} from "@/apis/request.js";

	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				StatusWidth: this.StatusWidth,
				id: "",
				info: {}
			};
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			gohospitalSynopsis(id) {
				uni.navigateTo({
					url: './hospitalSynopsis?id=' + id
				})
				uni.setStorageSync('gohospitalSynopsis', this.info.hospitalSynopsis)
			},
			favorite(status) {
				// status = 0 说明没有关注 那就关注; = 1 说明关注了 取消关注
				if (status == 0) {
					addFocus({
						attentionId: this.id,
						attentionType: 0
					}).then(() => {
						this.getinfo();
					});
				} else {
					this.$dialog("提示", "是否取消收藏").then(() => {
						cancelFocus({
							attentionId: this.id,
							attentionType: 0
						}).then(() => {
							this.getinfo();
						});
					});
				}
			},
			to(url, item) {
				uni.navigateTo({
					url
				});
			},
			async getinfo() {
				this.info = await getHospitalDetails({
					hospitalId: this.id
				});
				console.log(this.info);
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getinfo();
			//计算头部高度
			let that = this
		}
	};
</script>
<style lang="scss" scoped>
	.view {

		width: 100%;
		background-color: #f1efef;

		.nav-bar {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2;
			background: linear-gradient(70deg, #32C59A, #32C59A);
			height: 100rpx;
			width: 100vw;

			.nav-bar-item {
				justify-content: space-between;
				box-sizing: border-box;
				height: 100rpx;
				padding: 20rpx;
				display: flex;
			}
		}


		.Box {
			background: #ffffff;
			margin-bottom: 20rpx;


			.box-item {
				display: flex;
				box-sizing: border-box;
				padding: 30rpx 50rpx;
				justify-content: space-between;
				height: 80rpx;
				align-items: center;

				&:nth-child(1) {
					border-bottom: 1rpx solid #C0C0C0;
				}

				.titl-view {
					width: 30%;
					flex-shrink: 0;
				}

				.title {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.Info {
			padding: 30rpx;
			border-bottom: 1rpx solid #e8e8e8;
			position: relative;

			div:nth-child(1) {
				span {
					margin-right: 10rpx;
					display: inline-block;
				}

				span:nth-child(1) {
					font-size: 30rpx;
				}

				span:nth-child(2) {
					font-size: 22rpx;
					background: linear-gradient(#f5a91d 0%, #f4a200 53%, #f7c372 100%);
					color: #ffffff;
					border-radius: 4rpx;
					padding: 5rpx 10rpx;
				}

				span:nth-child(3) {
					font-size: 22rpx;
					background-color: #47ABF7;
					color: #ffffff;
					border-radius: 4rpx;
					padding: 5rpx 10rpx;
				}
			}

			div:nth-child(2) {
				margin: 10rpx 0rpx;
				font-size: 22rpx;
				display: flex;
				align-items: center;

				p {
					margin-right: 20rpx;

					span:nth-child(2) {
						color: #ababab;
					}
				}
			}

			div:nth-child(3) {
				display: flex;
				align-items: center;

				p:nth-child(1) {
					padding: 8rpx 10rpx;
					color: #edb344;
					font-size: 20rpx;
					margin-right: 10rpx;
					border: 1rpx solid #e9c278;
					border-radius: 4rpx;
					background-color: #ffffff;
				}

				p:nth-child(2) {
					padding: 8rpx 10rpx;
					color: #dd1d1a;
					font-size: 20rpx;
					margin-right: 10rpx;
					border: 1rpx solid #dd1d1a;
					border-radius: 4rpx;
					background-color: #ffffff;
				}
			}

			div:nth-child(4) {
				position: absolute;
				top: 30rpx;
				right: 30rpx;

				img {
					width: 39rpx;
					height: 35rpx;
				}
			}
		}

		.selectBox {
			.title {
				font-size: 28rpx;
				border-bottom: 1rpx solid #e8e8e8;
				padding: 30rpx;
			}

			.wrap {
				border-bottom: 1rpx solid #e8e8e8;
				padding: 30rpx 30rpx 0rpx 30rpx;

				.title {
					border: none;
					margin-bottom: 20rpx;
					padding: 0;

					span {
						color: #ababab;
					}
				}

				.list {
					display: flex;
					flex-wrap: wrap;
					align-items: center;

					p {
						margin-right: 15rpx;
						border: 4rpx solid #e8e8e8;
						font-size: 24rpx;
						background-color: #ffffff;
						padding: 8rpx 10rpx;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>